<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        * {
            list-style: none;
        }

        #demo {
            width: 520px;
            height: 280px;
            overflow: hidden;
            margin: 0 ;
            position: relative;
            margin: 0 auto;
        }

        #demo ul {
            width: 3640px;
            height: 280px;
            position: absolute;
            left: 0px;
            display: flex;
            justify-content: space-between;
        }
        #demo img{
            vertical-align: top;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById("demo")
            var time=setInterval(fun, 1)
            var num=0;
            function fun() {
                console.log(num);
                num<=-2600?num=0:num;
                box.children[0].style.left=num+"px";
                num-=1

            }
            box.onmouseover=function () {
                clearInterval(time);
            }
            box.onmouseout=function () {
                time=setInterval(fun, 1)
            }

        }
    </script>
</head>
<body>
<div id="demo">
    <ul>
        <li>
            <img src="img/1.webp" alt="">
        </li>
        <li>
            <img src="img/2.jpg" alt="">
        </li>
        <li>
            <img src="img/3.jpg" alt="">
        </li>
        <li>
            <img src="img/4.webp" alt="">
        </li>
        <li>
            <img src="img/5.jpg" alt="">
        </li>
        <li>
            <img src="img/1.webp" alt="">
        </li>
        <li>
            <img src="img/2.jpg" alt="">
        </li>
    </ul>
</div>
</body>
</html>